<template>
  <div class="func">
    <p class="attr">
      内容对齐
    </p>
    <div class="adjust-item">
      <el-radio-group v-model="pageConfigModel.contentAlignment">
        <el-radio label="left">
          左对齐
        </el-radio>
        <el-radio label="center">
          居中
        </el-radio>
        <el-radio label="right">
          右对齐
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  contentAlignmentPageConfig,
  IContentAlignmentPageConfig
} from "@/views/activity/actApp/components/default/operationComponents/contentAlignment/index";
import {WritableComputedRef} from "vue";

const props = withDefaults(defineProps<{
  pageConfig: IContentAlignmentPageConfig
}>(), {
  pageConfig: () => ({
    ...contentAlignmentPageConfig
  })
})

const emits = defineEmits<{
  (e: "update:page-config", value: IContentAlignmentPageConfig): void;
}>()

const pageConfigModel: WritableComputedRef<IContentAlignmentPageConfig> = computed({
  get() {
    return props.pageConfig
  },
  set(newValue) {
    emits("update:page-config", newValue)
  }
})
</script>

<style scoped lang="scss">
@use "@/views/activity/actApp/components/default/styles/operation.scss";

</style>
